<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery背景自动切换特效 - 站长素材</title>

<link rel="stylesheet" type="text/css" href="__PUBLIC__/main.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/bgstretcher.css" />

<script type="text/javascript" src="__PUBLIC__/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/bgstretcher.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
	
        //  Initialize Backgound Stretcher	   
		$('BODY').bgStretcher({
			images: ['__PUBLIC__/images/sample-1.jpg', '__PUBLIC__/images/sample-2.jpg', '__PUBLIC__/images/sample-3.jpg', '__PUBLIC__/images/sample-4.jpg', '__PUBLIC__/images/sample-5.jpg', '__PUBLIC__/images/sample-6.jpg'],
			imageWidth: 1024, 
			imageHeight: 768, 
			slideDirection: 'N',
			slideShowSpeed: 1000,
			transitionEffect: 'fade',
			sequenceMode: 'normal',
			buttonPrev: '#prev',
			buttonNext: '#next',
			pagination: '#nav',
			anchoring: 'left center',
			anchoringImg: 'left center'
		});
		
	});
</script>

<script type="text/javascript" src="__PUBLIC__/main.js"></script>

</head>
<body>
    <div id="page" style="display: none_;">
		<div class="page-top">&nbsp;</div>
		<div class="page-content">
                    <div class="page-wrapper">
                        <h1 style="text-align: center;">背景图片轮播</h1>
			
			<form action="#">
                            <div>
				<div class="column">

					<div class="row nav-buttons">
						<span class="pager">Pager:</span> <div id="nav">&nbsp;</div>
					</div>
				</div>
			</div>
                        </form>
                    </div>
                        
                </div>	
		<div class="page-bottom">&nbsp;</div>
    </div>
	<div style="text-align:center;clear:both">
	<br>
	<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
	<p><a href="#" target="_blank">后台入口</a></p>
	</div>
</body>
</html>